<template>
  <div class="app-container">  
      <el-form ref="filterForm" :model="formData" label-width="100px">
        <el-form-item label="矿产名称" prop="mineralName">
          <el-input v-model="formData.mineralName" clearable placeholder="矿产名称" maxlength="80" show-word-limit/>
        </el-form-item>
        <el-form-item label="矿产介绍" prop="mineralContent">
          <el-input type="textarea" v-model="formData.mineralContent" maxlength="200" show-word-limit clearable placeholder="矿产介绍"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="formData.remark" maxlength="200" show-word-limit clearable placeholder="备注"/>
        </el-form-item>
      </el-form>
      <el-button type="info" @click="onFormSaveButton()">保存</el-button>
      <el-button type="primary" @click="onFormSaveAndNewButton()">保存并新建</el-button>
      <el-button type="primary" @click="onFormNewButton()">新建</el-button>
      <el-button type="warning" @click="onFormCannelButton()">取消</el-button>
      <el-button type="danger" v-if="formData.ID > 0" @click="onFormRemoveButton()">删除</el-button>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import {getMineralDetail,saveMineral,removeMineral} from '@/api/geography/mineral'



export default {
  name: 'mineralForm',
  components: {  },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      mineralID:undefined,
      formData: {
      }
    }
  },
  created() {
    let mineralID = this.$route.query.mineralID
    mineralID = parseInt(mineralID)
    console.log(isNaN(mineralID))
    if(isNaN(mineralID) == false){
      this.mineralID = mineralID
      this.getInfo()
    }
    let parentMineralID = this.$route.query.parentMineralID
    parentMineralID = parseInt(parentMineralID)
    console.log(isNaN(parentMineralID))
    if(isNaN(parentMineralID) == false){
      this.formData.parentMineralID = parentMineralID
    }
  },
  methods: {
    getParentMineralID:function(){
      let parentMineralID = this.$route.query.parentMineralID
      parentMineralID = parseInt(parentMineralID)
      if(isNaN(parentMineralID) == false){
          return parentMineralID
      }
      return 0
    },
    getInfo:function(){
      let _this = this;
      getMineralDetail({
        "mineralID":this.mineralID
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            this.formData = response.data
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    onFormSaveButton:function(){
      let _this = this;
      saveMineral(_this.formData).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.$message({
              message: "成功",
              type: 'error'
            })
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    onFormSaveAndNewButton:function(){
      let _this = this;
      saveMineral(_this.formData).then((response) => {
          if (response.code === 200) {
            _this.onFormNewButton()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    onFormNewButton:function(){
        this.formData = {
          parentMineralID:this.getParentMineralID()
        }
    },
    onFormCannelButton:function(){
      let fromParentMineralID = this.getParentMineralID()
      if(fromParentMineralID){

      }else{

      }
      this.$router.push({ path: 'mineral'})
    },
    onFormRemoveButton:function(){
      let _this = this;
      removeMineral({
        "mineralID":this.mineralID
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.onFormCannelButton()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    }
  }
}
</script>
<style>
.filter { float: left; width: 160px; padding: 20px; min-height: 600px; }
.article { float: left; width: 800px; }
.article-item { width: 800px; height: 200px; margin-right: 25px; }
.article-item-text { float: left; width:600px; }
.article-item-icon { float: right; width:200px; height:150px; padding-left: 50px; }
.article-item-icon img { width:100%; height:100%; border-radius: 10px; }
</style>